<template>
	<view class="posDetailed">
		<u-navbar :is-back="true" :custom-back='backM' title="商户详情" back-text=''>
			<view @click="goWlist" class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;padding-right: 15px;color: #02AF74;">白名单</view>
		</u-navbar>

		<view class="tabwiperC">

			<u-tabs-swiper ref="tabs" :list="list" active-color="#4dbf92" inactive-color="" count="count" height="80" :is-scroll="false"
			 :current="current" bar-width="80" gutter="80" @change="tabsChange"></u-tabs-swiper>

			<view v-if="current==0">

				<view class="A">

					<view class="posInfoP">

						<view class="posInfoP-top">
							<view>·基础信息·</view>
							<view class="posInfoP-top-right">
								<view class="items" @click="goEditBasicM(shopDic)">
									<image src="../../style/image/myPos/edit.png" alt="">
										<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">编辑</view>
								</view>
								<view class="items" @click="goMap">
									<image src="../../style/image/myPos/pos.png" alt="">
										<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">导航</view>
								</view>
							</view>
						</view>

						<view class="posInfoP-bottom">
							<view class="imageP">
								<u-image :border-radius='30' width="100%" height="6rem" :src="shopDic.shopLogo"></u-image>
							</view>

							<view style="margin: 0.5rem 0rem;">
								<view style="font-size: 0.7rem;font-family: PingFang SC;font-weight: 400;margin:0.5rem;
						color: #000000;">{{shopDic.shopName}}</view>
								<view style="font-size: 0.6rem;font-family: PingFang SC;font-weight: 300;margin:0.5rem;
						color: #333333;">创建时间：{{shopDic.createTime}}</view>
								<view style="font-size: 0.6rem;font-family: PingFang SC;font-weight: 300;margin:0.5rem;
						color: #333333;">地址：{{shopDic.address}}</view>
							</view>
						</view>
					</view>

					<view class="a" @click="searchOrder">
						<view class="texts">·商户订单·</view>
						<view class="texts">查看订单>></view>
					</view>


					<view class="b">

						<view class="posInfoP">

							<view class="posInfoP-top">
								<view>·分润信息·</view>
								<view class="posInfoP-top-right">
									<view class="items" @click="goEditPriceM(shopDic)">
										<image src="../../style/image/myPos/edit.png" alt="">
											<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">编辑</view>
									</view>
								</view>
							</view>

							<view class="fen">
								<!-- <view class="itemss">
                        <view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;" >联系人</view>
                        <view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{shopDic.userName}}</view>
                    </view> -->
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">联系电话</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{shopDic.phone}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">是否参与分润</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{isSelect('joinProfit',shopDic.joinProfitState)}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">分润方式</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{profitString('profitPattern',shopDic.profitPattern)}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">分润比例</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{profitString('profitRatio',shopDic.profitRatio)}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">是否拥有查看订单权限</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{isSelect('showOrder',shopDic.showOrder)}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">是否拥有查看商户分润比例权限</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{isSelect('showProfit',shopDic.shopProfitRatio)}}</view>
								</view>
								<!-- <view class="itemss">
					     <view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;" >手续费</view>
					     <view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{profitString('drawRatio',shopDic.drawRatio)}}</view>
					 </view> -->
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">商户收益</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{shopDic.blance}}</view>
								</view>
							</view>

						</view>

					</view>


					<view class="b">
						<view class="posInfoP">

							<view class="posInfoP-top">
								<view>·充电宝设备资费·</view>
								<view class="posInfoP-top-right">
									<view class="items" @click="goEditPostagePrice(shopDic)">
										<image src="../../style/image/myPos/edit.png" alt="">
											<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">编辑</view>
									</view>
								</view>
							</view>

							<view class="fen">
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">计费模式</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{profitString('billingPattern',shopDic.billingPattern)}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">计费单价</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{shopDic.billingPrice}}</view>
								</view>
								<view class="itemss">
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">封顶值</view>
									<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{shopDic.billingMaxPrice}}</view>
								</view>
							</view>

						</view>
					</view>
				</view>



			</view>
			<view v-else>
				<view class="searchPP">

					<view class="searchP">
						<view class="search" :style="{ width: '100%' }">
							<u-search placeholder="请输入设备SN码" shape="round" v-model="terminalSN" :show-action="false" @search="searchTerminal"></u-search>
						</view>
						<!-- <view @click="celendarM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
                </view> -->
					</view>
				</view>


				<view class="b">

					<view class="posInfoP" v-for="(item,index) in shopTerminalLists" :key="index">

						<view class="posInfoP-top">

							<view class="posInfoP-top-right" @click="selected(item)">
								<view class="items">
									<image v-if="selectId == item.id" src="../../style/image/myPos/selectRound.png" alt="">
										<image v-if="selectId != item.id" src="../../style/image/myPos/round.png" alt="">
											<view style="font-size: 0.7rem;font-family: PingFang SC;font-weight: 400;color: #000000;">{{item.modelsName}}</view>
								</view>
							</view>

							<!-- <view style="font-size: 0.7rem;font-family: PingFang SC;font-weight: 400;color: #000000;" >{{item.modelsName}}</view> -->

							<view class="posInfoP-top-right" @click="outDevice(item)">
								<view class="items">
									<image src="../../style/image/Shome/tequipt.jpg" alt="">
										<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #02AF74;">弹出设备</view>
								</view>
							</view>
						</view>

						<view class="fen" @click="selected(item)">
							<view class="itemss">
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">铺货时间</view>
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{item.activeTime}}</view>
							</view>
							<view class="itemss">
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">底座SN</view>
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{item.sn}}</view>
							</view>
							<view class="itemss">
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">充电宝SN</view>
								<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 300;color: #333333;">{{item.groupTerminalSn}}</view>
							</view>

						</view>
					</view>

					<!-- <u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/> -->
					<uni-load-more @clickLoadMore="clickLoadMore" :content-text="contentText" :status="status"></uni-load-more>
					<!-- <u-empty   style="margin-top:0rem;" v-if="shopTerminalLists.length==0" text="暂无数据" mode="data"></u-empty> -->

					<view v-if="shopTerminalLists.length>0" style="padding: 0.5rem;display: flex;  align-items: center;justify-content: center;background-color: #02AF74;"
					 @click="endBind">
						<view style="font-size: 0.65rem;font-family: PingFang SC;font-weight: 800;color: #333333;">解除绑定</view>
					</view>
				</view>

			</view>


		</view>

		<u-modal v-model="modalShow" @confirm="confirm" :show-title="true" title='确认解绑设备？' :show-cancel-button="true"
		 :content="contentSN"></u-modal>

	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from 'vue-property-decorator'

	import {
		findShopDetails
	} from "../../utils/uniApi";
	import {
		findTerminalByShop
	} from "../../utils/uniApi";
	import {
		terminalRelieve
	} from "../../utils/uniApi";

	import uniLoadMore from '../loadMore/uni-load-more.vue'


	@Component({ //   @Component  是一个装修器   不可以在下面写语句
		name: 'test',
		components: {
			'uniLoadMore': uniLoadMore
		}
	})

	export default class extends Vue {

		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		}) msg!: string;


		public list = [{
				name: '商户信息',
				count: 0,
			},
			{
				name: "设备信息",
				count: 1,
			},

		]
		public current = 0; //tab的标题   0商户信息   1设备信息
		public shopId: any; //商户id
		public shopDic: any = {}; //商户详情
		public shopTerminalLists = []; //商户设备列表
		public selectId: any = -1; //选中的设备id
		public terminalSN: any = ''; //搜索关键字 设备SN码
		public modalShow = false; //弹窗是否显示
		public contentSN: any = '';

		public pageN: any = 1; //分页的页数
		//加载参数
		// public loadStatus = "nomore";
		// public loadText = {
		//   loadmore: "轻轻上拉",
		//   loading: "努力加载中",
		//   nomore: "暂无更多数据",
		// };
		// public loadmoreModal = true;
		public status = 'more'

		public contentText = {
			contentdown: '下拉或点击查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
		public continueTypes = true;


		onLoad(options: any) {
			this.shopId = options.shopId
			if (this.shopId) {
				uni.setStorage({
					key: "detailShopId",
					data: this.shopId,
					success: function() {},
				});
			} else {
				this.shopId = uni.getStorageSync("detailShopId");
			}

		}
		created() {

		}

		onHide() {
			console.log('+++++++++++++++++:执行hide方法')
		}

		onBackPress() {
			uni.hideLoading();
			uni.setStorage({
				key: "currentTab",
				data: 0,
				success: function() {},
			});
		}
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "../../pages/myPos/posDetailed",
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}
		//上拉加载更多
		onReachBottom() {
			if (!this.continueTypes) {
				return
			}
			this.pageN = this.pageN + 1;
			this.findTerminalByShop(this.shopId, this.terminalSN, this.pageN)
		}
		clickLoadMore() {
			this.onReachBottom()
		}

		onShow() {
			this.current = uni.getStorageSync("currentTab");
			this.findShopDetails(this.shopId)
			this.findTerminalByShop(this.shopId, this.terminalSN, this.pageN)
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

		}
		profitString(type: any, value: any) {
			if (type == 'profitPattern') {
				if (value == '0') {
					return '绝对分润'
				} else if (value == '1') {
					return '相对分润'
				}
			} else if (type == 'profitRatio') {
				return value * 100 + '%'
			} else if (type == 'drawRatio') {
				return value * 100 + '%'
			} else if (type == 'billingPattern') {
				if (value == '1') {
					return '30分钟'
				} else if (value == '2') {
					return '60分钟'
				}
			}
		}

		isSelect(type: any, value: any) {
			if (type == 'joinProfit') {
				if (value == '0') {
					return '是'
				} else if (value == '1') {
					return '否'
				}
			} else if (type == 'showOrder') {
				if (value == '0') {
					return '否'
				} else if (value == '1') {
					return '是'
				}
			} else if (type == 'showProfit') {
				if (value == '0') {
					return '否'
				} else if (value == '1') {
					return '是'
				}
			}
		}

		//商户详情下设备信息
		findTerminalByShop(orderId: any, Sn: any, pageno: any) {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				sn: Sn,
				pageNo: pageno,
				pageSize: 10,
				shopId: orderId == "" ? "" : parseInt(orderId), //订单id
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findTerminalByShop(params).then((res: any) => {
				// console.log('+++++++++++++++++商户详情下的设备信息' + JSON.stringify(res.data) )
				if (res.data.code == 200) {

					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
						this.status = "more";
					} else {
						this.status = "noMore";
					}
					if (res.data.isFirst || !boolee) {

						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}

						if (this.shopTerminalLists.length > 0 && this.pageN == 1) { //搜索  删除已有数据
							this.shopTerminalLists = [];
						}
						this.shopTerminalLists = this.shopTerminalLists.concat(res.data.data)
						// this.shopTerminalLists = res.data.data
						uni.hideLoading();
					}



					// if(this.shopTerminalLists.length>0){//搜索时  删除已有数据 如果有分页在考虑
					//  this.shopTerminalLists = [];
					// }
					// this.shopTerminalLists = this.shopTerminalLists.concat(res.data.data)
					// uni.hideLoading();
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}

			});

		}
		//商户详情
		findShopDetails(orderId: any) {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				shopId: orderId == "" ? "" : parseInt(orderId), //订单id
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findShopDetails(params).then((res: any) => {
				console.log('+++++++++++++++++商户详情' + JSON.stringify(res.data))
				if (res.data.code == 200) {
					this.shopDic = res.data.data;
					uni.hideLoading();
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}

			});

		}


		backM() {
			uni.navigateBack({
				delta: 1,
			});
		}
		//去白名单列表
		goWlist() {
			uni.navigateTo({
				url: "../whiteList/index?shopid=" + this.shopId,
			});
		}
		//搜索设备
		searchTerminal(value: any) {
			this.terminalSN = value;
			this.pageN = 1;
			this.findTerminalByShop(this.shopId, this.terminalSN, this.pageN)
		}

		//选择设备  解除绑定
		selected(item: any) {
			if (this.selectId == item.id) {
				this.selectId = -1;
				this.contentSN = '';
			} else {
				this.selectId = item.id;
				this.contentSN = item.sn;
			}
		}
		//解除绑定按钮
		endBind() {
			if (this.selectId == -1) {
				uni.showToast({
					title: '请选择需要解除绑定的设备',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			this.modalShow = true
		}
		//确认 解除设备绑定
		confirm() {
			let params = {
				terminalId: parseInt(this.selectId), //设备id
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			terminalRelieve(params).then((res: any) => {
				console.log('+++++++++++++++++确认解除设备' + JSON.stringify(res.data))
				if (res.data.code == 200) {
					uni.showToast({
						title: '解除绑定的设备成功',
						icon: 'none',
						duration: 2000
					});
				} else {

				}

			});
		}

		//弹出设备按钮
		outDevice(value: any) {
			console.log(value,4534534333333)
			uni.navigateTo({
				url: "../../views/sEquiptment/ejectNext?deviceDic=" + encodeURIComponent(JSON.stringify(value)),
			});
		}
		//编辑充电宝资费信息按钮
		goEditPostagePrice(value: any) {
			uni.navigateTo({
				url: "./shopCalculate?shopDic=" + encodeURIComponent(JSON.stringify(value)),
			});
		}
		//编辑分润信息按钮
		goEditPriceM(value: any) {
			uni.navigateTo({
				url: "../../pages/item/modify/index?shopDic=" + encodeURIComponent(JSON.stringify(value)),
			});
		}
		//查询订单按钮
		searchOrder() {
			uni.navigateTo({
				url: "../order/shopOrder?shopid=" + this.shopId,
			});
		}
		//导航按钮
		goMap() {
			console.log("+++++++导航按钮")
		}
		//编辑按钮
		goEditBasicM(value: any) {
			uni.navigateTo({
				url: "../myPos/editBasic?shopDic=" + encodeURIComponent(JSON.stringify(value)),
			});
		}

		//商户信息  和设备信息  tab
		tabsChange(index: any) {
			this.current = index;
			uni.setStorage({
				key: "currentTab",
				data: this.current,
				success: function() {},
			});
		}

	}
</script>

<style lang="scss" scoped>
	.u-image__loading {
		border-radius: 10px;
		background-color: rgb(243, 244, 246);
	}


	.posDetailed {
		background-color: #f3f5f7;
		height: 100vh;
	}

	.posInfoP {
		margin: 0.5rem;
		background-color: white;
		border-radius: 0.3rem;
		padding: 0.5rem 0.3rem;
	}

	.posInfoP-top {
		display: flex;
		border-bottom: 1rpx solid #eaeef1;
		padding: 0rem 0.5rem 0.5rem 0.5rem;
		justify-content: space-between;
		align-items: center;
	}

	.posInfoP-top-right {

		display: flex;
	}

	.posInfoP-top-right>.items {

		display: flex;
	}

	.items {
		display: flex;
		align-items: center;
	}

	.items>image {
		width: 0.6rem;
		height: 0.6rem;
		margin: 0rem 0.5rem;
	}

	.imageP {
		margin: 0.5rem;
		border-radius: 1rem;
		width: 11rem;
	}

	.posInfoP-bottom {

		display: flex;
	}

	.a {
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin: 0.5rem;
		background-color: white;
		padding: 0.5rem;
		border-radius: 0.3rem;
	}

	.texts {

		font-size: 0.7rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #000000;
	}


	.itemss {

		padding: 0.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}





	/* ////// */

	.searchPP {
		background-color: white;
		padding: 0.5rem;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
</style>
